<template>
  <div class="tabs-anchor-wrapper">
    <div class="tabs-box">
      <div
        v-for="(item, index) in dataList"
        :key="item.label"
        class="tabs-item"
        :class="{ active: currentIndex === index }"
        @click="handleClick(item, index)"
      >
        <div class="label" :class="{ 'one-label': len === 1 }">{{ item.label }}</div>
        <div v-if="len > 1" class="line"></div>
      </div>
    </div>

    <div class="tabs-content">
      <slot></slot>
      <slot v-for="item in dataList" :name="item.value"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  props: {
    currentTab: {
      type: Object,
      default: () => ({}),
    },
    dataList: {
      type: Array,
      default: () => [
        {
          label: '基本信息',
          value: 'BaseInfo',
        },
        {
          label: '产业情况',
          value: 'IndustryInfo',
        },
        {
          label: '产业配套',
          value: 'IndustrySupport',
        },
        {
          label: '生产成本',
          value: 'productionCost',
        },
        {
          label: '周边配套',
          value: 'peripheralSupport',
        },
      ],
    },
  },
  data() {
    return {
      currentIndex: 0,
    }
  },
  computed: {
    len() {
      return this.dataList.length
    },
  },
  methods: {
    handleClick(item, index) {
      this.currentIndex = index
      this.$emit('update:currentTab', item)

      // console.log(this.$refs[item.value])
    },
  },
})
</script>
<style lang="scss" scoped>
.tabs-anchor-wrapper {
  margin-bottom: 20px;
  overflow: hidden;

  .tabs-box {
    display: flex;
    padding: 0 30px;
    margin-left: -15px;
    border-bottom: 1px solid #e0e4ed;
    background-color: #fff;

    .tabs-item {
      position: relative;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 15px;
      cursor: pointer;

      .one-label {
        color: #40445d !important;
        font-size: 20px !important;
        font-weight: bold !important;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e0e4ed;
      }

      .label {
        font-size: 16px;
        color: #898faa;
      }

      .line {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 2px;
        background-color: transparent;
        width: 0px;
        transition: all 0.5s;
      }
    }

    .active {
      .label {
        color: #40445d;
        font-weight: bold;
      }
      .line {
        width: 30px;
        background-color: #005fff;
        transition: all 0.5s;
      }
    }
  }

  .tabs-content {
    padding: 30px;
  }
}
</style>
